import * as React from 'react';
//建立页面数据和store 的关联
import { connect } from 'react-redux'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'
import utils from '../../utils/utils';
import { Link, RouteComponentProps } from 'react-router-dom';
import { Button, WhiteSpace, WingBlank,Pagination,Icon } from 'antd-mobile';
import '../../utils/common.scss'
import './index.scss'

import Top from '../../components/top/top'
import img001 from './img/001.gif'

interface IState {
  userInfo:UserInfo,
  recent_topics:any[],
  recent_replies:any[]
}
interface IProps extends RouteComponentProps {
}
interface UserInfo {
  loginname: string,
	avatar_url: string,
	githubUsername: string,
	create_at: string,
	score: number,
  recent_topics:any[],
  recent_replies:any[]
}
class Getstart extends React.Component<IProps, IState> {
  state:IState = {
    userInfo:{
      loginname: '',
      avatar_url: '',
      githubUsername: '',
      create_at: '',
      score: 0,
      recent_topics:[],
      recent_replies:[]
    },//用户数据
    recent_topics:[],//已经发表话题
    recent_replies:[],//参与的话题
  }
  componentDidMount(){
    this.getUserInfo();
  }
  //得到用户信息
  getUserInfo=()=>{
    Get('/api/v1/user/374046604',{}).then((res)=>{
      if(res.success){
        let resData=res.data;
        resData.create_at=utils.formatDate1(resData.create_at);
        for(let ii of resData.recent_topics){
          ii.last_reply_at=utils.formatDate1(ii.last_reply_at);
        }
        for(let jj of resData.recent_replies){
          jj.last_reply_at=utils.formatDate1(jj.last_reply_at);
        }
        this.setState({
          userInfo:resData,
          recent_topics:resData.recent_topics,
          recent_replies:resData.recent_replies
        })
      }
    },(err)=>{
      console.log(err);
    })
  }
  render() {
    let {userInfo,recent_topics,recent_replies} =this.state;
    return (
      <div className='user_info_box'>
        <Top history={this.props.history}></Top>
        <div className='user_info'>
          <div className='user_img'>
            {userInfo.avatar_url?(<img src={userInfo.avatar_url}/>):(<img src={img001}/>)}   
            <div className='mar_l_20'>
              <div>
                <span className='font_32 user_name'>账户名：</span>
                <span className='font_30'>{userInfo.loginname}</span>
              </div>
              <div className='mar_t_10'>
                <span className='font_26 user_name'>Github账户：</span>
                <span className='font_24'>{userInfo.githubUsername}</span>
              </div>
            </div>
          </div>     
          <div className='user_time'><span className='color_666'>创建时间：</span>{userInfo.create_at}</div>
          <div className='user_text_box'>
            <div className='text_title'>已创建话题</div>
            {recent_topics.length>0?
            (
              <ul>
                {
                  recent_topics.map((item:any,index:number)=>{
                    return(
                      <li className='list_li' key={index}>
                        {item.author.avatar_url?(<img src={item.author.avatar_url}/>):(<img src={img001}/>)}
                        <div className='li_text'>
                          <div className='li_title'>{item.title}</div>
                          {item.top?(<span className='top'>置顶</span>):''}
                        </div>
                        <span>{item.last_reply_at}</span>
                      </li>
                    )
                  })
                }
              </ul>
            ):(
              <div className='no_data'>暂无数据</div>
            )}
          </div>     
          <div className='user_text_box'>
            <div className='text_title'>已参与话题</div>
            {recent_replies.length>0?
            (
              <ul className='home_list'>
                {
                  recent_replies.map((item:any,index:number)=>{
                    return(
                      <li className='list_li' key={index}>
                        {item.author.avatar_url?(<img src={item.author.avatar_url}/>):(<img src={img001}/>)}
                        <div className='li_text'>
                          <div className='li_title'>{item.title}</div>
                          {item.top?(<span className='top'>置顶</span>):''}
                        </div>
                        <span>{item.last_reply_at}</span>
                      </li>
                    )
                  })
                }
              </ul>
            ):(
              <div className='no_data'>暂无数据</div>
            )}
          </div>   
        </div>
      </div>
    )
  }
}


//将store里面的数据映射到props 这个数据
//就是取store的数据 然后操作 赋值给页面的变量
//将页面数据和全局数据绑定
const mapState = ({ store }: any) => {
  return ({
    isLogin: store.isLogin,
    userInfo:store.userInfo
  })
}

const mapDispatch = ({ store }: any) => ({
  // changeLoaderType() {
  //   store.changeLoaderType(true)
  // }
  setPlayListAct(data:any){
    store.setPlayListAct(data)
  },
  setMp3ListAct(data:any){
    store.setMp3ListFun(data)
  },
})
//返回了 connect 其实是一个容器组件
export default connect(mapState, mapDispatch)(Getstart); 
